<template>
  <right-cont>
    <template #header>
      <div class="headerItem all-flex all-align-items-center">
        <div class="headerItemLeft">姓名：</div>
        <el-input v-model="inputVal" placeholder="Please input" clearable />
      </div>
      <div class="headerItem all-flex all-align-items-center">
        <div class="headerItemLeft">联系方式：</div>
        <el-select class="headerItemRight" v-model="selectVal" placeholder="Select" clearable>
          <el-option
            v-for="item in selectOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="headerItem all-flex all-align-items-center">
        <div class="headerItemLeft">岗位人员：</div>
        <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
      </div>
      <template v-if="showAll">
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
        <div class="headerItem all-flex all-align-items-center">
          <div class="headerItemLeft">岗位人员：</div>
          <el-tree-select class="headerItemRight" v-model="treeVal" :data="treeData" default-expand-all :expand-on-click-node="false" show-checkbox multiple />
        </div>
      </template>
      <div class="all-flex">
        <el-button
          type="primary"
          @click="onImportExcelClick"
          v-permission="['importUser']"
        >
          <svg-icon icon="search" class="el-icon--left"/>
          {{ $t('msg.gdemo.commit') }}
        </el-button>
        <el-button type="text" :icon="ArrowDown" @click="showAll = true" v-if="!showAll">展开</el-button>
        <el-button type="text" :icon="ArrowUp" @click="showAll = false" v-else>收起</el-button>
      </div>
    </template>

    <template #cont>
      <el-table :data="tableData" border style="width: 100%">
        <!-- 索引 -->
        <el-table-column label="#" type="index" />
        <!-- 姓名 label是国际化的内容 -->
        <el-table-column prop="username" :label="$t('msg.excel.name')">
        </el-table-column>
        <!-- 手机号 -->
        <el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          :label="$t('msg.excel.action')"
          fixed="right"
          width="260"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="onShowClick(row._id)"
            >
              {{ $t('msg.excel.show') }}
            </el-button>
            <el-button
              type="info"
              size="small"
              @click="onShowPop(row)"
              v-permission="['distributeRole']"
            >
              {{ $t('msg.excel.showRole') }}
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="onRemoveClick(row)"
              v-permission="['removeUser']"
            >
              {{ $t('msg.excel.remove') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template #foot>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </right-cont>
  <Pop v-model:popVisible="popVisible" @updatePop="handleUpdatePop"></Pop>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import RightCont from "@/components/Content/rightCont.vue";
import Pop from './components/pop.vue'
import {useI18n} from "vue-i18n";
import {ElMessage, ElMessageBox} from "element-plus";
let popVisible = ref(false);
let onShowPop = () => {
  popVisible.value = true
}
let handleUpdatePop = (value:boolean) => {
  console.log('handleUpdatePop',value)
}

let tableData = ref([
  {_id:1,username:'zs',mobile:123},
  {_id:2,username:'li',mobile:456},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
  {_id:3,username:'ww',mobile:789},
])
const total = ref(10)
const page = ref(1)
const size = ref(2)

let inputVal = ref('')

let selectVal = ref('')
let selectOpts = ref([
  {value: 'Option1', label: 'Option1',},
  {value: 'Option2', label: 'Option2',},
  {value: 'Option3', label: 'Option3',},
])

let treeVal = ref('')
let treeData = ref([
  {
    value: '1',
    label: 'Level1',
    children: [
      {
        value: '1-1',
        label: 'Level1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level1-1-1',
          },
          {
            value: '1-1-2',
            label: 'Level1-1-2',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level2',
    children: [
      {
        value: '2-1',
        label: 'Level2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level2-2-1',
          },
        ],
      },
    ],
  }
])

let showAll = ref(false)

let router = useRouter()
let onShowClick = (id) => {
  router.push(`/gdemo/Info/${id}`)
}

const i18n = useI18n()
const onRemoveClick = (row) => {
  console.log(row)
  ElMessageBox.confirm(
    i18n.t('msg.excel.dialogTitle1') +
    row.username +
    i18n.t('msg.excel.dialogTitle2'),
    {
      type: 'warning'
    }
  )
  .then(async () => {
    // 执行删除
    // let res = await deleteUser(row._id)
    console.log(res)
    ElMessage.success(i18n.t('msg.excel.removeSuccess'))
    // 重新渲染数据
    // getListData()
  })
  .catch((err) => {
    console.log('进入了catch', err)
  })
}

</script>

<style scoped lang="scss">

</style>
